<template>
	<view class="container">
		<view class="bc_fff">
			<u-tabs :list="tabsList" lineColor="#FE5A1C" itemStyle="width: 33.33%;padding: 22rpx 0;"
				inactiveStyle="color: #999999" activeStyle="font-weight:600" lineWidth="66rpx" lineHeight="10rpx"
				@change="handleChangeTabs"></u-tabs>
		</view>
		<view class="p_12">
			<view class="mtafter_12" v-for="item,index in dataList" :key="key(index)">
				<view class="fc">
					<view class="ib lh_21 plr_6 br_4 fz_12" style="background: rgba(0,0,0,0.05);color: #B0B0B0;">
						{{item.createTime||''}}
					</view>
				</view>
				<view class="bc_fff mt_8 br_8 p_12" v-if="params.type==3">
					<view class="fx aic">
						<view class="width_10 height_10 br50 mr_10" style="background: #EF4339;" v-if="item.isRead!=1">
						</view>
						<view class="fb">
							订单编号：{{item.data.orderNo||''}}
						</view>
					</view>
					<view class="fx mt_15">
						<CustomImage width="160rpx" height="160rpx" radius="8rpx" :src="item.data.image">
						</CustomImage>
						<view class="ml_12 fx_1 flow_h">
							<view class="fe">
								{{item.data.productName||''}}
							</view>
							<view class="mt_8">
								最新状态：{{item.data.status||''}}
							</view>
							<view class="mt_12 fc_primary" @click="()=>handleDetail('order',item,index)">
								查看详情>>
							</view>
						</view>
					</view>
				</view>
				<view class="bc_fff mt_8 br_8 p_12" v-if="params.type==1">
					<view class="fx aic">
						<view class="width_10 height_10 br50 mr_10" style="background: #EF4339;" v-if="item.isRead!=1">
						</view>
						<view class="fb">
							{{item.title||''}}
						</view>
					</view>
					<view class="mt_15">
						{{item.content||''}}
					</view>
				</view>
				<view class="bc_fff mt_8 br_8 p_12" v-if="params.type==2" @click="()=>handleDetail('',item,index)">
					<view class="fx aic">
						<view class="width_10 height_10 br50 mr_10" style="background: #EF4339;" v-if="item.isRead!=1">
						</view>
						<view class="fb">
							【{{item.title||''}}】
						</view>
					</view>
					<view class="mt_15" v-if="item.data.imagesList && item.data.imagesList[0]">
						<CustomImage width="650rpx" height="280rpx" radius="16rpx" :src="item.data.imagesList[0]">
						</CustomImage>
					</view>
					<view class="mt_12 fe_2" v-html="item.data.detail||''">
					</view>
				</view>
			</view>
			<view class="ptb_16" v-if="dataList.length">
				<u-loadmore :status="loadingStatus" />
			</view>
			<view class="pt_36" v-if="!dataList.length&&!loading">
				<Empty title="暂无消息" />
			</view>
		</view>
	</view>
</template>

<script>
	import CustomImage from '@/components/Image'
	import dataMixin from '@/mixins/data.js'
	import Empty from '@/components/Empty'
	import api from '@/service/config/api.js'
	export default {
		mixins: [dataMixin],
		components: {
			CustomImage,
			Empty
		},
		data() {
			return {
				tabsList: [{
					name: '订单消息',
					type: 3,
				}, {
					name: '系统消息',
					type: 1,
				}, {
					name: '公告消息',
					type: 2,
				}],
				dataList: [],
				params: {
					type: 3,
				},
				listUrl: '/user/tMyNotice/page',
			};
		},
		computed: {
			key() {
				return index => this.params.type + '-' + index
			}
		},
		onLoad() {
			this.getData(true)
		},
		methods: {
			getData(refresh = false) {
				return new Promise(resolve => {
					this.isSearching = true
					if (refresh) {
						this.current = 1
						this.total = 1
						this.end = false
						this.dataList = []
						this.$utils.loading()
					} else {
						this.loading = true
					}
					if (this.listUrl) {
						api[this.httpMethod](this.listUrl, {
							current: this.current,
							size: this.size,
							...this.params ? this.params : {}
						}, {
							noHideLoading: this.noHideLoading
						}).then(res => {
							if (res.data.records && res.data.records.length) {
								res.data.records.forEach(item => {
									let data = {}
									if (this.params.type == 2) {
										data = item.contentJson || {}
									} else {
										data = (item.content !== null && typeof item.content ===
												'object') ? item.content : (item
												.content && (/^{.*}$/).test(item.content)) ? JSON
											.parse(item.content) : {}
									}
									data.imagesList = (data.imagesList && data.imagesList.split) ?
										data.imagesList.split(',') : [],
										item.data = data
								})
							}
							this.dataList = refresh ? (res.data.records || []) : [...this.dataList, ...(res
								.data
								.records || [])];
							if (res.data.pages <= this.current) {
								this.end = true
							}
							this.getDataNext && this.getDataNext()
						}).finally(() => {
							this.loading = false
							this.initLoading = false
							resolve()
						})
					}
				})
			},
			handleChangeTabs({
				type
			}) {
				this.$set(this.params, 'type', type)
				if (type == 1) {
					api.get('/user/tMyNotice/readAll', {
						type: 1
					}, {
						noHideLoading: true,
						noToast: true
					})
				}
				this.getData(true)
			},
			handleDetail(type, item, index) {
				this.$set(this.dataList[index], 'isRead', 1)
				switch (type) {
					case 'order':
						api.get('/user/tMyNotice/read', {
							id: item.id
						})
						uni.navigateTo({
							url: '/pages/person/pages/order_detail?id=' + item.sourceId
						})
						break;
					default:
						uni.navigateTo({
							url: '/pages/common/pages/richtext?type=news&id=' + item.id
						})
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {}
</style>